/* *
@Author: MaLiang
@Date: 2021-08-25
@LastEditors: --
@LastEditTime: --
@path: src/components/common/PageHeader/index.tsx
@Description: qmp子应用公共头部导航栏+原生app状态栏占位
* */
import { defineComponent, computed, getCurrentInstance, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import HeaderPlaceholder from '../HeaderPlaceholder'
const headerStyles = require('./index.module.less')
export default defineComponent({
  name: 'PageHeader',
  setup() {
    const { proxy }: any = getCurrentInstance()
    const $route = useRoute()
    const $router = useRouter()
    const $store = useStore()
    const defaultColor = '#f7f7f7'

    const nativeAppStatusBarStyle = computed(
      (): {
        height: string
        backgroundColor: string
      } => {
        return {
          height: `${$route.meta.nativeAppStatusBarHeight}px`,
          backgroundColor: `${$route.meta.nativeAppStatusBarBgColor || defaultColor}`
        }
      }
    )

    // 原生app状态栏占位元素
    const renderNativeAppStatusBarPlaceholder = () => {
      return <div id={headerStyles.placeholder} style={nativeAppStatusBarStyle.value}></div>
    }

    // 头部导航栏背景色
    const headerBgColor = computed((): unknown => {
      return $route.meta.headBgColor || defaultColor
    })

    // 头部导航栏文字颜色
    const headerTextColor = computed((): unknown => {
      return $route.meta.headerTextColor || 'black'
    })

    // 返回上一页
    const onClickLeft = (): void => {
      if (!$route.meta.showBack) {
        return
      }
      // 待办跳转时带isHome=true参数，就可以立即返回原生
      if ($route.query.isHome) {
        goNativeApp()
        return
      }
      switch ($route.path) {
        case '/':
          goNativeApp()
          break
        default:
          $router ? $router.goBack() : goNativeApp()
          break
      }
    }

    // 返回首页
    const goHomeHandle = () => {
      $store.commit('app/deleteAllKeepAlivePage')
      $router.replace('/')
    }

    // 返回原生应用
    const goNativeApp = () => {
      proxy.$nativeHandler('closeWeb', '')
    }

    onMounted(() => {
      // 获取headerBar高度
      const headerBarHeight = proxy.$refs.navBarRef.$el.offsetHeight
      $store.commit('app/updateHeaderBarHeight', headerBarHeight)
    })

    const renderHeaderBar = () => {
      return (
        <qmp-nav-bar
          capsule
          ref="navBarRef"
          left-text={$route.meta.title}
          left-arrow={$route.meta.showBack}
          background-color={headerBgColor.value}
          text-color={headerTextColor.value}
          style={{
            top: $route.meta.nativeAppStatusBarHeight + 'px'
          }}
          fixed={true}
          onClickLeft={onClickLeft}
          onCapsuleClickLeft={goHomeHandle}
          onCapsuleClickRight={goNativeApp}
        />
      )
    }

    return () => {
      return (
        <div>
          {!$route.meta.hideHeadPlaceholder && <HeaderPlaceholder />}
          {renderNativeAppStatusBarPlaceholder()}
          {renderHeaderBar()}
        </div>
      )
    }
  }
})
